* {
    margin: 0;
    padding: 0;
}

.container {
    width: 100vw;
    height: 100vh;
    background-image: url(../img/map.png);
    background-position: no-repeat;
    background-size: 100% 100%;
    overflow: hidden !important;
    position: relative;
    background-position: center;
    z-index: 99;
}

.img1 {
    width: 130px;
    position: absolute;
    left: 8%;
    top: 3%;
}

.img2 {
    width: 130px;
    position: absolute;
    right: 8%;
    top: 25%;
}

.img3 {
    width: 100px;
    position: absolute;
    left: 8%;
    top: 45%;
}


.img4 {
    width: 130px;
    position: absolute;
    right: 8%;
    top: 60%;
}

.img5 {
    width: 100px;
    position: absolute;
    left: 20%;
    top: 75%;
}

.bg1,
.bg2,
.bg3,
.bg4,
.bg5 {
    z-index: 999;
    width: 0%;
    height: 0%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.754);
    /* 添加动画属性，指定动画名称、时长、时间函数等 */
    /* 让元素隐藏溢出内容，避免动画过程中出现布局问题 */
    overflow: hidden;
    transform-origin: center center;
}

@keyframes grow {
    from {
        width: 0%;
        height: 100%;
    }

    to {
        width: 100%;
        height: 100%;
    }
}

@keyframes growa {
    from {
        width: 100%;
        height: 100%;
    }

    to {
        width: 100%;
        height: 0%;
    }
}



@keyframes grow2 {
    from {
        width: 100%;
        height: 0%;
    }

    to {
        width: 100%;
        height: 100%;
    }
}

@keyframes growa2 {
    from {
        width: 100%;
        height: 100%;
    }

    to {
        width: 0%;
        height: 100%;
    }
}

.bg1 img,.bg2 img,.bg3 img,.bg4 img,.bg5 img {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 10;
}



@keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  .img3 {
    animation: rotate 8s linear infinite;
  }


  @keyframes zoom {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.15);
    }
    100% {
      transform: scale(1);
    }
  }

  .img4 {
    animation: zoom 3s ease-in-out infinite;
  }

  @keyframes shake {
    0%, 100% {
      transform: translateX(0);
    }
    25% {
      transform: translateX(-16px);
    }
    75% {
      transform: translateX(15px);
    }
  }

  .img1 {
    animation: shake 4s ease-in-out infinite;
  }
  .img2 {
    animation: shake 3.5s ease-in-out infinite;
  }
  .img5 {
    animation: shake 5.5s ease-in-out infinite;
  }

.container img {
    height: 100%;
    width: 100%;
}
.qwe{
    width: 150px !important;
    height: 70px !important;
    position: absolute;
    left: 30%;
    top: 5%;
}